<!DOCTYPE html>
<html lang="en">
<head>      
    <meta charset="UTF-8">
    <title>index</title>     
    <link href="/static/bootstrap/dist/css/bootstrap.css" rel="stylesheet"></link>
    {% block head_css %}
     <link href="/static/css/index.css" rel="stylesheet"></link>
    {% end %}
    {% block extends_css %}
    {% end %}
</head>     
<body>      
        <p>index</p> 
        <svg width="100%" height='1500'></svg>
        <script src="/static/jquery/dist/jquery.min.js"></script>
        <script src="/static/bootstrap/dist/js/bootstrap.js"></script>
        {% block body_js %}
        <script src="/static/js/d3.v3.min.js"></script>
        <script src="{{ static_url('js/force.js') }}"></script>
        <script type="text/javascript" src="{{ static_url('js/websocket.js') }}"></script>
        <script type="text/javascript">
            graph = new new_force(800, 2200);
            graph.updateAll()
            websocket = new web_client("ws://localhost:8080/socket")
            websocket.on_msg(function(json){
                console.log(json);
                if (json.action == "add_node"){
                    for(var i in json.nodes){
                        console.log(json.nodes[i])
                        graph.add_node(json.nodes[i]);
                    }
                    
                }else if (json.action == "add_link"){
                    for(var i in json.links){
                        console.log(json.links[i])
                        graph.add_link_by_id(json.links[i].from, json.links[i].to, json.links[i].value);    
                    }
                    
                }else{
                    console.log(json)
                }
                
            })
        </script>
        {% end %}
        {% block extends_js %}
        {% end %}
</body>     
</html>